{% extends "layout.html" %}
{% from "tree_status.html" import treestatus %}
{% from "description.html" import waterfall_description %}

{% block header -%}
{{ super() }}
<hr/>
<script>
  /**
   * Pseudo namespace for chromium - keep it short because we are in a very
   * narrow scope for this file.
   * @type {Object}
   */
  var c = {};

  /**
   * Replaces html references with anchor tags to the same.
   * @param {String} className CSS class to operate on.
   */
  function autoLink(className) {
    var comments = document.querySelectorAll(className);
    for(var i = 0; i < comments.length; i++) {
      comments[i].innerHTML = comments[i].innerHTML.replace(
          /https?:\/\/[^ \t\n<]*/g, '<a href="$&">$&</a>');
    }
  };

  window.addEventListener("load", function() {
    autoLink('.DevComment');
  }, false);

  /**
   * This is the indicator for whether we are in console or waterfall
   * mode, or some future resource.
   * @type {String}
   */
  c.viewtype = location.pathname.split('/').slice(-1);

  /**
   * Returns a search string portion including marker, or an empty string.
   * optional.
   * @param {String} opt_s A search string, or some form of emptiness.
   * @returns {!String}
   */
  function search(opt_s) {
    return opt_s ? '?' + opt_s.replace(/^[?]/, '') : '';
  };

  /**
   * Replicates a string.
   * @param {Number} i A whole number of repetitions.
   * @param {String} x The string to be repeated.
   * @returns {!String}
   */
  function repeat(i, x){
    var t = ''
    for (j = 0; j < i; j++) { t += x; }
    return t;
  };

  /**
   * A simple HTML table string.
   * @param {String} attributes A set of HTML attributes for the table.
   * @param {String} contents The contents.
   * @returns {!String}
   */
  function table(attributes, contents) {
      return '<table ' + attributes + '>' + contents + '</table>\n';
  };

  /**
   * A simple HTML div string.
   * @param {String} attributes A set of HTML attributes for the div.
   * @param {String} contents The contents.
   * @returns {!String}
   */
  function div(attributes, contents) {
    return '<div ' + attributes + '>' + contents + '</div>';
  };

  /**
   * A simple HTML table row string.
   * @param {String} attributes A set of HTML attributes for the table row.
   * @param {String} contents The contents.
   * @returns {!String}
   */
  function tr(contents) {
    return '<tr>' + contents + '</tr>\n';
  };

  /**
   * A simple HTML table cell string.
   * @param {String} attributes A set of HTML attributes for the table cell.
   * @param {String} contents The contents.
   * @returns {!String}
   */
  function td(attributes, contents) {
    return '<td ' + attributes + '>' + contents + '</td>';
  };

  /**
   * A simple HTML anchor string.
   * @param {String} url The value for the href.
   * @param {String} attributes A set of HTML attributes for the table.
   * @param {String} contents The contents.
   * @returns {!String}
   */
  function a(url, contents, attributes) {
    return '<a href="' + url + '" ' + attributes + '>' + contents + '</a>';
  };

  /**
   * Gives an HTML anchor string to the specified URL, but of the same view
   * type as the current page.
   * @param {String} url The URL portion up to the view.
   * @param {String} search_opt A the query portion.
   * @param {String} contents The contents for the tag.
   * @returns {!String}
   */
  function aView(url, search_opt, contents) {
      return a((url ? url + '/' : '') + c.viewtype + search(search_opt),
               contents, '')
  };

  /**
   * A simple HTML iframe string.
   * @param {String} attributes A set of HTML attributes for the table.
   * @param {String} url The source of the iframe.
   * @returns {!String} the iframe or an empty string if noframe is specified.
   */
  function iFrame(attributes, url) {
      if (window.location.href.search('noframe') == -1) {
          return '<iframe ' + attributes + ' src="' + url + '"></iframe>';
      }
      return ''
  };
</script>

<div class="Announcement">

{{ treestatus() }}

<center style="padding: 0 7px">
  <table width="100%" valign="top" bgcolor="#efefef"
      style="box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
      -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
      -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);">
    <tr>
      <td width="29%">
        <table valign="top" width="100%" style="border-spacing: 5px">
          <tr>
            <td style="text-align: right;">
              <b>Useful pages:</b>
            </td>
            <td colspan="2" style="text-align: left;">
              <script>
              document.write([
                a("https://code.google.com/p/webrtc/source/browse", "source", ""),
                a("https://review.webrtc.org/", "reviews", ""),
                a("https://code.google.com/p/webrtc/issues/list", "bugs", ""),
              ].join('&nbsp;&nbsp;&nbsp;'));
              </script>
            </td>
          </tr>
          <tr>
            <td style="text-align: right;">
               <b>Masters:</b>
            </td>
            <td colspan="2" style="text-align: left;">
              <script>
              document.write([
                a("../client.webrtc/waterfall", "WebRTC", ""),
                aView("../client.webrtc.fyi", "", "WebRTC FYI"),
                aView("../client.webrtc.perf", "", "WebRTC Perf"),
                aView("../chromium.webrtc", "", "Chromium"),
                aView("../chromium.webrtc.fyi", "", "Chromium FYI"),
                aView("../tryserver.webrtc", "", "Try WebRTC"),
              ].join('&nbsp;&nbsp;&nbsp;'));
              </script>
            </td>
          </tr>
          <tr>
            <td style="text-align: right;">
               <b>Navigate:</b>
            </td>
            <td colspan="2" style="text-align: left;">
              <script>
              document.write([
                a("https://dev.chromium.org/developers/testing/chromium-build-infrastructure/tour-of-the-chromium-buildbot", "about", ""),
                a("./waterfall/help", "customize", ""),
                a("./waterfall", "waterfall", ""),
                a("./console", "console", ""),
                a("./waterfall?show_events=true&failures_only=true", "failures", ""),
              ].join('&nbsp;&nbsp;&nbsp;'));
              </script>
            </td>
          </tr>
        </table>
      </td>
      <td width="1" bgcolor="#CCCCCC">
      </td>
      <td width="1%">
      </td>
      <td width="70%">
        <table width="100%">
          <script language="javascript">
            c.webrtc = '';
            c.webrtc_perf = '';
            c.chromium = '';
            c.chromium_fyi = '';

            c.status_webrtc = '../client.webrtc';
            c.status_webrtc_perf = '../client.webrtc.perf';
            c.status_chromium = '../chromium.webrtc';
            c.status_chromium_fyi = '../chromium.webrtc.fyi';

            /**
             * Builds a reference for the iframe with boxes.
             * @param {String} x the name of the waterfall.
             * @returns {String} The URL.
             */
            function BarUrl(x) {
              return 'https://build.chromium.org/p/' + x +
                     '/horizontal_one_box_per_builder';
            }
            c.bar_webrtc = BarUrl('client.webrtc')
            c.bar_webrtc_perf = BarUrl('client.webrtc.perf')
            c.bar_chromium = BarUrl('chromium.webrtc');
            c.bar_chromium_fyi = BarUrl('chromium.webrtc.fyi');


            /**
             * Joins URL and search terms.
             * @param {String} type The Url without the cgi search portion.
             * @param {String} content The parameters for the sub-selection
             *                         inside the master.  Optional.
             * @returns {String} A completed URL.
             */
            function GetUrl(type, content) {
              return type + search(content);
            }

            c.default_iframe_properties = [
                'width="100%"',
                'height="20"',
                'frameborder="0"',
                'scrolling="no"',
            ].join(' ');

            /**
             * The most detailed specification of a builder bar with boxes.
             * Reutrns an HTMLstring with 2 <td>s
             * @param {String} status_url URL portion for the title link.
             * @param {String} bar_url URL portion for the array of boxes.
             * @param {String} content specification for the references, e.g..
             * @param {String} name what to call this bar.
             * @param {String} bar_properties extra attributes for the array
             *                 of boxes portion.
             * @param {String} link_properties extra attributes for the name
             *                 portion that is a link.
             * @returns {String}
             */
            function HTMLBaseBar(status_url, bar_url, content, name,
                                 bar_properties, link_properties) {
              return td('',
                        a(GetUrl(status_url, content), name,
                          link_properties)) +
                     td(bar_properties,
                        iFrame(c.default_iframe_properties,
                               GetUrl(bar_url, content)));
            }

            /**
             * The more common specification of a builder bar with boxes.
             * Presume to take an entire row.
             * @param {String} status_url URL portion for the title link.
             * @param {String} bar_url URL portion for the array of boxes.
             * @param {String} content specification for the references, e.g..
             * @param {String} name what to call this bar.
             * @returns {String}
             */
            function HTMLBar(status_url, bar_url, content, name) {
              return tr(HTMLBaseBar(status_url, bar_url, content, name,
                                    'width="99%" colspan=9', ''));
            }

            /**
             * A specification of a builder bar with boxes, which is one of
             * multiple in a row.
             * Note that since these are elements of a table, percents
             * can be irrelevant to the final layout.
             * @param {String} status_url URL portion for the title link.
             * @param {String} bar_url URL portion for the array of boxes.
             * @param {String} content specification for the references, e.g..
             * @param {String} name what to call this bar.
             * @param {String} pc percent of the line to allocat to the boxes.
             * @returns {String}
             */
            function HTMLSubBar(status_url, bar_url, content, name, pc) {
              return HTMLBaseBar(status_url, bar_url, content, name,
                                 'width="' + pc + '"', '');
            }

            document.write(tr(td('colspan=10 width="99%"',
                table('width="100%"',
                  tr(
                     HTMLBaseBar(c.status_webrtc, c.bar_webrtc, c.webrtc,
                                 'WebRTC', 'width="100%"')
                  )
                ) +
                table('width="100%"',
                  tr(
                     HTMLBaseBar(c.status_webrtc_perf, c.bar_webrtc_perf,
                                 c.webrtc_perf, 'WebRTC Perf', 'width="33%"') +
                     HTMLBaseBar(c.status_chromium, c.bar_chromium,
                                 c.chromium, 'Chromium', 'width="33%"') +
                     HTMLBaseBar(c.status_chromium_fyi, c.bar_chromium_fyi,
                                 c.chromium_fyi, 'Chromium FYI', 'width="33%"')
                   )
                )
            )));
          </script>
        </table>
      </td>
    </tr>
  </table>
</center>
{{ waterfall_description() }}

</div>
{% endblock header %}

{% block footer %}

{{ super() }}
{# <p>Debug info: {{ debuginfo }}</p> #}
{% endblock %}
